<template>
  <view class="baseInfor">
    <view class="baseInfor-top">
      <img class="img" v-if="infor.headimgurl" :src="infor.headimgurl" />
      <img
        class="img"
        v-else
        src="https://recruit-oss.oss-cn-beijing.aliyuncs.com/recruit/img/defaultImg.png"
        alt=""
      />
      <view class="cont">
        <view class="name">
          {{ worker.realname }}
          <view class="hornerBox">
            <view class="horner">
              <image
                class="icons"
                src="https://recruit-oss.oss-cn-beijing.aliyuncs.com/recruit/img/sm.png"
                mode=""
              ></image>
              实名认证
            </view>
            <view class="horner">
              <image
                class="icons"
                src="https://recruit-oss.oss-cn-beijing.aliyuncs.com/recruit/img/zs.png"
                mode=""
              ></image>
              技能证书
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="timelineItem">
      <view class="timeItem">
        <view class="line">
          <view class="out">
            <view class="inner"></view>
          </view>
        </view>
        <view class="dif rightContent">
          <view class="left"> 联系电话 </view>
          <view v-if="worker.tell" class="right">
            {{ tellStatus ?worker.tell.substr(0, 7) + "****" : worker.tell }}
            <view @click="tellStatus = false" class="phone">
              <u-icon name="phone"></u-icon>
              免费查看
            </view>
          </view>
        </view>
      </view>
      <view class="timeItem">
        <view class="line">
          <view class="out">
            <view class="inner"></view>
          </view>
        </view>
        <view class="rightContent">
          <view class="left"> 工龄 </view>
          <view class="right"> {{ worker.workYears }}年 </view>
        </view>
      </view>
      <view class="timeItem">
        <view class="line">
          <view class="out">
            <view class="inner"></view>
          </view>
        </view>
        <view class="rightContent">
          <view class="left"> 工种 </view>
          <view class="right">
            <u-tag
              class="tags"
              :key="index"
              v-for="(item, index) in typeList"
              :text="item.name"
              plain
              size="mini"
            ></u-tag>
          </view>
        </view>
      </view>
      <view class="timeItem">
        <view class="line">
          <view class="out">
            <view class="inner"></view>
          </view>
        </view>
        <view class="rightContent">
          <view class="left"> 期望工作地 </view>
          <view class="right">
            {{ worker.expectProvince }}
            {{ worker.expectCity }}
            {{ worker.expectDistrict }}
          </view>
        </view>
      </view>
      <view class="timeItem">
        <view class="line">
          <view class="out">
            <view class="inner"></view>
          </view>
        </view>
        <view class="rightContent">
          <view class="left"> 当前所在地 </view>
          <view class="right">
            {{ worker.currProvince }}
            {{ worker.currCity }}
          </view>
        </view>
      </view>
      <view class="timeItem">
        <view class="line">
          <view class="out">
            <view class="inner"></view>
          </view>
        </view>
     
        <view  class="rightContent">
          <view class="left"> 人员构成 </view>
          <view  class="right">
            {{ worker.personStructs }}
          </view>
        </view>
      </view>
      <view v-if="worker.personStruct!=1" class="timeItem">
        <view class="line">
          <view class="out">
            <view class="inner"></view>
          </view>
        </view>
        <view class="rightContent">
          <view class="left"> 队伍人数 </view>
          <view class="right"> {{ worker.teamNum }}人 </view>
        </view>
      </view>
    </view>
    <view class="intro">
      <view class="intro-tit"> 自我介绍 </view>
      <view class="intro-detail">
        {{ worker.teamDesc }}
      </view>
      <view v-if="certList.length" class="intro-tit"> 职业技能 </view>
      <view v-if="certList.length" class="cent">
        <view :key="index1" class="centLi" v-for="(item, index1) in certList">
          <img class="card" :src="item.certUrl" />
          <view class="name">
            <view class="left">
              {{ item.certName }}
            </view>
            <view class="right">
              {{ item.addTime }}
            </view>
          </view>
        </view>
      </view>
		
      <view v-if="proList.length" class="intro-tit"> 项目经验 </view>
      <view v-if="proList.length" class="cent1">
        <view :key="index" class="centLi1" v-for="(item, index) in proList">
          <view class="cardCont">
            <view class="name">
              {{ item.proName }}
            </view>
            <view class="addr">
              {{ item.province }}{{ item.city }}{{ item.district
              }}{{ item.address }}
            </view>
            <view class="desc">
              {{ item.proDesc }}
            </view>
            <view class="card">
              <img
                :key="index"
                v-for="(item, index) in item.proImgUrls.split(',')"
                class="img"
                :src="item"
              />
            </view>
            <view class="time">项目时间：{{item.addTime}}</view>
          </view>
				
          
        </view>
      </view>

			<view class="footer">
            <view @click="collection" class="footer-left">
              <u-icon
                v-if="collect"
                class="icon nochecked"
                name="star"
              ></u-icon>
              <u-icon v-else class="icon checked" name="star-fill"></u-icon>
              <view>{{ collect ? "收藏岗位" : "取消收藏" }}</view>
            </view>
            <view class="footer-right">
              <view @click="phone" class="btn">
                <u-icon name="phone"></u-icon>拨打电话
              </view>
            </view>
          </view>
    </view>
  </view>
</template>

<script>
import api from "../../../api/routes.js";

import { mapMutations } from "vuex";
export default {
  data() {
    return {
      collect: true,
      tellStatus: true,
      workerId: "",
      typeList: [],
      certList: [],
      proList: [],
      infor: {},
      worker: {},
      cateOptin:[]
    };
  },

  onLoad(e) {
    this.workerId = e.workerId;
    this.getDetai();
    this.setfindWorkersPage(1);
  },
  methods: {
    ...mapMutations(["setfindWorkersPage"]),
    async collection() {
      if (!uni.getStorageSync("token")) {
        uni.navigateTo({
          url: "/package/pages/components/auth",
        });

        return false;
      } else {
        const res = await this.$myRequest({
          url: api.collect,
          method: "GET",
          data: {
            collectId: this.worker.id,
            type: "worker",
          },
        });
        if (res.data.code == 0) {
          uni.showToast({
            title: res.data.msg,
            duration: 2000,
          });
          this.collect = !this.collect;
        }
      }
    },
    phone(phone) {
      if (!uni.getStorageSync("token")) {
        uni.navigateTo({
          url: "/package/pages/components/auth",
        });

        return false;
      }
      if (!this.tellStatus) {
        uni.makePhoneCall({
          phoneNumber: this.worker.tell, //仅为示例
        });
      } else {
        uni.showToast({
          icon: "none",
          title: "请先获取电话号码！",
          duration: 2000,
        });
      }
    },

    async getDetai() {
      const res1 = await this.$myRequest({

        url: api.dictionary,
        method: "GET",
        data: {
          code: "person_struct",
        },
      });
      this.cateOptin = res1.data.list;

      const res = await this.$myRequest({
       
        url: api.workerDetail,
        method: "GET",
        data: {
          workerId: this.workerId,
        },
      });
      this.infor = res.data;
      this.typeList = res.data.typeList;
      this.certList = res.data.certList;
      this.proList = res.data.proList;
      this.worker = res.data.worker;


      this.worker.personStructs = this.cateOptin.filter((r) =>
        this.worker.personStruct.includes(r.dict_value)
      )[0].dict_name;

      const res11 = await this.$myRequest({
        url: api.checkIsCollect,
        method: "GET",
        data: {
          collectId: this.worker.id,
          type: "worker",
        },
      });
      this.collect = !res11.data.collectState;
     

      
     
      this.proList.map((i) => {
        let proImgUrls = i.proImgUrls ? i.proImgUrls.split(",") : [];
        this.$set(i, "proImgUrls", proImgUrls);
      });
    },
  },
};
</script>
<style>
page {
  background: #efefef;
}
</style>
<style scoped lang="scss">
.baseInfor {
  padding-bottom: 70px;
  &-top {
    background: #fff;
    display: flex;
    padding: 10px;
    align-items: center;

    img {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      display: block;
      margin-right: 8px;
    }

    .cont {
      flex: 1;

      .name {
        display: flex;
        align-items: center;
        font-size: 14px;
        font-weight: bold;
        color: #333333;

        .age {
          font-weight: normal;
          padding: 0 0 0 5px;
        }

        .hornerBox {
          flex: 1;
          display: flex;
        }

        .horner {
          font-weight: normal;
          padding: 2px 10px 2px 5px;
          margin-left: 10px;
          display: flex;
          align-items: center;
          font-size: 10px;
          border-radius: 30px;
          border: 1px solid #efb336;
          color: #efb336;

          .icons {
            width: 16px;
            display: block;
            height: 16px;
          }
        }
      }
    }
  }

  .timelineItem {
    margin: 8px 0 0;
    background: #fff;
    padding: 22px 0 5px;

    .timeItem {
      display: flex;
      padding-left: 50rpx;

      .line {
        width: 1px;
        background: #ececec;
        position: relative;

        .out {
          position: absolute;
          top: 0;
          left: 50%;
          transform: translateX(-50%);
          display: flex;
          justify-content: center;
          align-items: center;
          width: 26rpx;
          height: 26rpx;
          background: rgba(64, 151, 246, 0.6);
          border-radius: 50%;

          .inner {
            width: 14rpx;
            height: 14rpx;
            background: #4097f6;
            border-radius: 50%;
          }
        }
      }

      .rightContent {
        &.dif .right {
          margin-top: -5px;
        }

        flex: 1;
        line-height: 1;
        padding: 0 10rpx 40rpx;
        margin-left: 20rpx;

        min-height: 50rpx;
        display: flex;
        font-size: 13px;

        .left {
          color: #999;
          width: 78px;
          text-align-last: justify;
          margin-right: 10px;
        }

        .right {
          color: #333;
          display: flex;
          flex-wrap: wrap;
          align-items: center;

          .phone {
            margin: 0 10px;
            padding: 5px 10px;
            display: flex;
            align-items: center;
            border-radius: 15px;
            background: #efb336;
            color: #fff;
          }

          .tags {
            margin-right: 8px;
            background-color: #f6f7fb;
            color: #545559;
            border: 1px solid #f6f7fb;
            margin-bottom: 5px;
          }
        }
      }
    }
  }

  .intro {
    margin: 8px 0;
    background: #fff;
    padding: 10px;

    &-tit {
      font-size: 14px;
      font-weight: bold;
      padding: 10px 0;
    }

    &-detail {
      font-size: 13px;
      padding: 8px 0;
      color: #606266;
    }

    .cent1 {
      .centLi1 {
        margin-bottom: 15px;

        // background: #ECF5FF;
        .cardCont {
          box-shadow: 0px 0px 8px #e4e1e1;
          font-size: 14px;
          color: #333;
          border-radius: 5px;
          padding: 10px;

          .name {
            font-size: 16px;
            color: #333;
          }

          .addr {
            color: #777;
            font-size: 12px;
            padding: 6px 0;
          }

          .desc {
            color: #999999;
            font-size: 12px;
            padding: 4px 0;
          }

          .card {
            border-radius: 3px 3px 0 0;
            width: 95%;
            margin: 0 auto;
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            justify-content: space-between;

            img {
              width: 32%;
              height: 120px;
              display: block;
              margin-bottom: 10px;
            }
          }
        }
      }
    }

    .cent {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
    }

    .centLi {
      width: 48%;
      box-shadow: 0px 0px 8px #e4e1e1;

      margin-bottom: 8px;

      .name {
        font-size: 14px;
        color: #333;
        padding: 4px 8px;
        border-radius: 0 0 3px 3px;

        .left {
          flex: 1;
          padding: 5px 0;
        }

        .right {
          width: 120px;
          color: #999999;
          font-size: 12px;
        }
      }

      .card {
        border-radius: 3px 3px 0 0;
        width: 100%;
        display: block;
        height: 200px;
      }
    }
  }
}
.footer {
  padding-bottom: 0;
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
  height: 50px;
  display: flex;
  align-items: center;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #fff;
  z-index: 9;

  // z-index: 9;
  &-left {
    flex: 1;
    text-align: center;
    font-size: 11px;
    color: #afb2be;
    height: 50px;
    background: #fff;

    .icon {
      font-size: 25px;
      margin-top: 5px;

      &.checked {
        color: #2979ff;
      }
    }
  }

  &-right {
    flex: 2;
    display: flex;
    align-items: center;

    .btn {
      flex: 1;
      height: 50px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 0;
      color: #fff;

      .u-icon--right {
        padding-right: 5px;
      }

      &:nth-child(1) {
        background: #1684fd;
      }
    }
  }
}
.time{
  font-size: 12px;
  color: #999;
}
</style>
